<template>
	<view class="MainBox">
		<view class="CardBox">
			<view class="logoBox">
				<!-- <image class="logo" src="../../static/images/logo.png"></image> -->
			</view>
			<view class="selectBox">
				<button class="login">马上登录</button>
				<button class="register" @click="handleRegister">马上注册</button>
			</view>
			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/account.png"></image>
				<input 
					class="inputField" 
					type="text" 
					placeholder="请输入手机号或用户名" 
					v-model="account"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>
			<view class="inputItem">
				<image class="icon" src="/static/images/loAndRe/password.png"></image>
				<input 
					class="inputField" 
					type="password" 
					placeholder="请输入密码" 
					v-model="password"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>
			<button class="loginBtn"  @click="handleLogin">登录</button>
			<view class="termsBox">
				<label>
					<checkbox value="accept" :checked="isTermsAccepted" @click="toggleTerms"/>
					我已阅读并同意<text @click="openTermsPage">服务条款</text>以及<text @click="openPrivateTermsPage">隐私权政策</text>
				</label>
			</view>
		</view>
		<image class="img" src="../../static/images/people3.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: '',
				isTermsAccepted: false 
			}
		},
		methods: {
			handleLogin() {
				if (!this.account || !this.password) {
					uni.showToast({ title: '请填写完整信息', icon: 'none' });
					return;
				}
				if (!this.isTermsAccepted) {
					uni.showToast({ title: '请先接受服务条款', icon: 'none' });
					return;
				}
				console.log('登录账号:', this.account, '密码:', this.password);
				uni.navigateTo({
					url:"/pages/selectRole/selectRole"
				})
			
			},
			handleRegister() {
				uni.navigateTo({ url: '/pages/register/register' }); 
			},
			toggleTerms() {
				this.isTermsAccepted = !this.isTermsAccepted;
			},
			
			openTermsPage() {
				const index = 1;
				uni.navigateTo({ url:  `/pages/terms/terms?key=${index}`}); 
			},
			openPrivateTermsPage(){
				const index = 1;
				uni.navigateTo({ url:  `/pages/privateTerms/privateTerms?key=${index}`}); 
			}
		}
	}
</script>

<style>
	.img{
		position:absolute;
		height:180px;
		width: 230px;
		bottom: 0px;
	}
	.MainBox{
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-image: url(/static/images/bg3.jpg) ;
		background-repeat: no-repeat;
		background-size: cover;
		flex-direction: column;
		
	}
	.CardBox{
		background-color: white;
		width: 90vw;
		height: 55vh;
		border-radius: 20px;
		margin-top: 160px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.logoBox{
		width: 100px;
		height: 100px;
		border-radius: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 130px;
	}
	.logo{
		width: 80px;
		height: 80px;
	}
	.selectBox{
		display: flex;
		justify-content: center;
		margin-top: 70px;
		margin-bottom: 40px;
	}
	
	.inputItem {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F3A479;
		padding: 10px 0;
		margin-bottom: 20px;
		width: 80%;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-right: 12px;
		opacity: 0.8;
	}

	.inputField {
		flex: 1;
		font-size: 15px;
		color: #333;
		padding: 0;
	}

	.inputField::placeholder {
		color: #ccc;
	}

	.selectBox {
		display: flex;
		justify-content: space-between;
		width: 80%;
		gap: 16px;
	}

	.login,
	.register {
		height: 50px;
		font-size: 14px;
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		flex: 1;
	}

	.login {
		background: linear-gradient(135deg, #FE8532, #F3A479);
		box-shadow: 0 4px 10px rgba(254, 133, 50, 0.3);
		border-radius: 20px 70px 20px 20px;
	}

	.register {
		background-color: #FFF3E8;
		color: #D9926C;
		border: 1px solid #F3A479;
		border-radius:  20px 20px 20px 70px;
	}
	.loginBtn{
		background: linear-gradient(135deg, #FE8532, #F3A479);
		box-shadow: 0 4px 10px rgba(254, 133, 50, 0.3);
		height: 40px;
		width:80%;
		font-size: 14px;
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		margin-top: 30px;
	}
	/* 去除默认按钮样式 */
	button::after {
		border: none;
	}
	.termsBox {
		width: 80%;
		margin-top: 40px;
		font-size: 13px;
		color: #666;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.termsBox checkbox {
		transform: scale(0.7); /* 调整复选框大小 */
		margin-right: 5px;
	}
	
	.termsBox text {
		color: #F3A479;
		text-decoration: underline;
		cursor: pointer;
	}
</style>
